<!--  -->
<template>
  <div ref="printLend" class="pitchman-box ">
          <div v-for="(item,indexs) in dataList" :key="indexs" class="printClass" style="page-break-after: always;">
            <el-row>
              <h2>{{ item.title }}</h2>
            </el-row>
            <el-row class="print_info">
              <el-col :span="6"><span>借出人:</span>{{ item.name }}</el-col>
              <el-col :span="6"><span>联系方式:</span>{{ item.phone }}</el-col>
              <el-col :span="6"><span>借出时间:</span>{{ item.lendTime }}</el-col>
              <el-col :span="6"><span>押金:</span>{{ item.price }}</el-col>
            </el-row>
            <table border="1" width="100%" height="100%" cellspacing="0" cellpadding="0">
              <thead>
                <!--表头,这里就是正常的表格循环-->
                <th>序号</th>
              </thead>
              <tbody align="center">
                <tr v-for="(items,index) in item.list" :key="index">
                  <td>{{ index +1 }}</td>
                </tr>
              </tbody>
            </table>
            <el-row class="logistics-bottom">
              <el-col style="text-align: left;" :span="12">打印时间：{{ item.printTime }}</el-col>
              <el-col style="text-align: right;" :span="12">第{{ item.currentPage }}页，共{{ totalPage }}页</el-col>
            </el-row>
            <!-- <div style="page-break-after: always;" /> -->
          </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
    };
  },
  methods: {
    getPrintDataInfo(data) {
      const arrCopy = JSON.parse(JSON.stringify(data))
      arrCopy.forEach((items, indexs) => {
        items.printTime = this.$moment().format('YYYY-MM-DD HH:ss:mm')//这里是我的需要的打印时间
        if (items.list.length % this.page.size === 0) {
          this.totalPage = items.list.length / this.page.size//this.page.size是我列表的分页显示条数,这边使用为打印时一个页面的条数
        } else {
          this.totalPage = parseInt(items.list.length / this.page.size) + 1
        }
        for (let i = 1; i <= this.totalPage; i++) {
          const obj = JSON.parse(JSON.stringify(items))
          obj.list = this.getTableDataByPaging(i, this.page.size, items.list).data
          obj.currentPage = this.getTableDataByPaging(i, this.page.size, items.list).page
          this.dataList.push(obj)
        }
      })
    },
    // 打印清单分页数据处理
    getTableDataByPaging(page = 1, pageSize = 10, totalData = []) {
      const { length } = totalData
      const tableData = {
        data: [],
        page,
        pageSize,
        length
      }
      if (pageSize >= length) { // pageSize大于等于总数据长度，说明只有1页数据或没有数据
        tableData.data = totalData
        tableData.page = 1// 直接取第一页
      } else { // pageSize小于总数据长度，数据多余1页
        const num = pageSize * (page - 1)// 计算当前页（不含）之前的所有数据总条数
        if (num < length) { // 如果当前页之前所有数据总条数小于（不能等于）总的数据集长度，则说明当前页码没有超出最大页码
          const startIndex = num// 当前页第一条数据在总数据集中的索引
          const endIndex = num + pageSize - 1// 当前页最后一条数据索引
          tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex)// 当前页数据条数小于每页最大条数时，也按最大条数范围筛取数据
        } else { // 当前页码超出最大页码，则计算实际最后一页的page，自动返回最后一页数据
          const size = parseInt(length / pageSize) // 取商
          const rest = length % pageSize // 取余数
          if (rest > 0) { // 余数大于0，说明实际最后一页数据不足pageSize，应该取size+1为最后一条的页码
            tableData.page = size + 1// 当前页码重置，取size+1
            tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length)
          } else if (rest === 0) { // 余数等于0，最后一页数据条数正好是pageSize
            tableData.page = size// 当前页码重置，取size
            tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length)
          } // 注：余数不可能小于0
        }
      }
      return tableData
    },
  }
}
</script>
<style lang='scss' scoped>
</style>